<template>
    <div>
        <div class="text-sm divide-y">
            <div class="p-4 pb-2" v-for="(item, index) in data">
                <div class="flex items-center">
                    <img :src="g2" class="w-12 h-12 rounded-full" />
                    <div class="mt-1 ml-2 grow">
                        <div>一念之间</div>
                        <div class="text-xs text-gray-400">2023-03-03</div>
                    </div>
                    <div class="grid text-gray-600 place-content-center" @click="showAction">
                        <IRi:more-2-line />
                    </div>
                </div>
                <div class="m-2 text-gray-600">
                    <div class="mt-2 leading-6">
                        <TextEllipsis :line="2">
                            <span
                                class="text-xs mr-2 bg-[#fef7ed] text-gray-600 py-px px-2 rounded-md inline-block ">#每日一秀#</span>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
                        </TextEllipsis>
                    </div>
                    <div class="grid grid-cols-3 gap-1 mt-2 " v-if="item.goods.length > 0">
                        <div class=" aspect-1" v-for="(goods, index) in item.goods">
                            <LazyImage :src="g" />
                        </div>
                    </div>
                    <div class="flex items-center justify-between mt-4">
                        <div class="grow">同款好物</div>
                        <div class="flex items-center shrink-0">
                            <div class="inline-block w-10 h-10">
                                <LazyImage :src="g" />
                            </div>
                            <div class="inline-block w-10 h-10">
                                <LazyImage :src="g" />
                            </div>
                        </div>
                        <div class="ml-1 shrink-0">
                            <IMingcute:rightFill />
                        </div>
                    </div>
                    <div class="flex items-center justify-between mt-2 text-lg text-center">
                        <div class="flex items-center space-x-1" @click="isLike = !isLike">
                            <div>
                                <ITabler:thumb-up v-show="!isLike" />
                                <ITabler:thumb-up-filled v-show="isLike" class="text-red-500" />
                            </div>
                            <span class="text-xs">33</span>
                        </div>
                        <div class="flex items-center space-x-1">
                            <!-- <IHeroicons:chat-bubble-bottom-center/> -->
                            <IAkar-icons:chat-dots />
                            <span class="text-xs">33</span>
                        </div>
                        <div class="flex items-center space-x-1" @click="showShare">
                            <IMingcute:share-2-line />
                            <span class="text-xs">33</span>
                        </div>

                        <div></div>
                        <IIconParkOutline:more />
                    </div>
                    <div class="mt-4 text-gray-600">
                        <div><span class=" text-sky-600">章鱼哥：</span>好可爱好可爱我的小孩～～</div>
                        <div><span class="text-sky-600">海绵宝宝：</span>章鱼哥要淡定些</div>
                        <div><span class="text-sky-600">哥斯拉：</span>嗷呜～～</div>
                    </div>
                </div>
            </div>
        </div>
        <Popup ref="popupRef">
            <div class="text-gray-600 bg-white rounded-t-lg">
                <div class="flex items-center justify-center py-2 border-b">
                    <div class="w-10 h-10 overflow-hidden rounded-full">
                        <LazyImage :src="g" />
                    </div>
                    <div class="ml-2">一念之间</div>
                </div>
                <div class="px-2 text-center ">
                    <div v-for="(item, index) in actions" class="py-2" @click="item.handler">
                        {{ item.text }}
                    </div>
                </div>
                <div class="py-3 text-center border-t" @click="closeAction">取消</div>
            </div>
        </Popup>
        <Toast ref="toastRef" />
        <Share ref="shareRef" :icon="false" />
    </div>
</template>
    
<script setup lang='ts'>
import g from '~/assets/home/1.jpg'
import g2 from '~/assets/home/2.jpg'
const toastRef = ref();
const popupRef = ref();
const shareRef = ref();
const showShare = () => {
    shareRef.value?.open()
}
const showAction = () => {
    popupRef.value?.open()
}
const closeAction = () => {
    popupRef.value?.close();
}

const actions = [
    {
        text: 'Ta 的主页',
        handler() {
            toastRef.value.show('Ta 的主页')
        }
    },
    {
        text: '关注',
        handler() {
            toastRef.value.show('关注')
        }
    },
    {
        text: '不看 Ta',
        handler() {
            toastRef.value.show('不看 Ta')
        }
    },
    {
        text: '举报',
        handler() {
            toastRef.value.show('举报')
        }
    }
]
withDefaults(
    defineProps<{
        data: any[]
    }>(),
    {
        data: () => []
    }
)
const isLike = ref(false);
</script>
    
<style></style>